<template>
	<view class="page-container">
		<!-- 顶部场馆信息 -->
		<view class="venue-header">
			<view class="venue-info-container">
				<image class="venue-image"
					src="https://ai-public.mastergo.com/ai/img_res/780968c3ed84303e411c5f7dae942ef1.jpg"
					mode="aspectFill"></image>
				<view class="venue-info">
					<text class="venue-name">阳光体育中心</text>
					<text class="venue-address">北京市朝阳区建国路88号</text>
				</view>
			</view>
			<view class="date-picker">
				<uni-icons class="date-icon" type="calendar" size="24" color="#666666" @click="onDateIconClick" />
			</view>
		</view>
		<!-- 核心数据看板 -->
		<view class="data-board">
			<view class="data-card">
				<text class="card-title">今日流量</text>
				<text class="card-value">2,345</text>
				<text class="card-unit">人次</text>
			</view>
			<view class="data-card">
				<text class="card-title">总计流量</text>
				<text class="card-value">128,756</text>
				<text class="card-unit">人次</text>
			</view>
			<view class="data-card">
				<text class="card-title">峰值记录</text>
				<text class="card-value" style="color: #4080FF;">3,892</text>
				<text class="card-desc">2024-01-01</text>
			</view>
		</view>
		<!-- 标题和时间 -->
		<view class="data-header">
			<text class="data-title">实时数据</text>
			<view class="time-refresh">
				<text class="data-time">更新于 12:30</text>
				<uni-icons class="refresh-icon" type="refresh" size="16" color="#666666" @click="onRefresh" />
			</view>
		</view>
		<!-- 当前客流卡片 -->
		<view class="current-flow-card">
			<view class="flow-circle" :style="{ borderColor: `rgb(64, 128, 255, ${busynessPercentage/100})` }">
				<view class="circle-content">
					<text class="circle-value">{{busynessPercentage}}%</text>
					<text class="circle-label">繁忙度</text>
				</view>
			</view>
			<view class="flow-status">
				<view class="status-item">
					<text class="status-label">场内</text>
					<text class="status-value status-inside">325</text>
				</view>
				<view class="status-item">
					<text class="status-label">离场</text>
					<text class="status-value status-left">432</text>
				</view>
				<view class="status-item">
					<text class="status-label">未进场</text>
					<text class="status-value status-waiting">119</text>
				</view>
			</view>
		</view>
		<!-- 项目分类分析 -->
		<view class="chart-container">
			<view class="chart-header">
				<text class="chart-title">项目分类分析</text>
				<view class="filter-icon">
					<uni-icons type="filter" size="20" color="#666666" @click="onCategoryFilter" />
				</view>
			</view>
			<view class="chart-content">
				<view class="pie-chart">
					<!-- 这里使用实际的图表组件 -->
					<view class="chart-placeholder">饼状图展示区域</view>
				</view>
				<view class="chart-legend">
					<view class="chart-legend" v-if="categoryTab === 0">
						<view class="legend-item">
							<view class="legend-color" style="background-color: #4080FF;"></view>
							<text class="legend-text">游泳 32%</text>
						</view>
						<view class="legend-item">
							<view class="legend-color" style="background-color: #36CFC9;"></view>
							<text class="legend-text">篮球 28%</text>
						</view>
						<view class="legend-item">
							<view class="legend-color" style="background-color: #FFA940;"></view>
							<text class="legend-text">羽毛球 25%</text>
						</view>
						<view class="legend-item">
							<view class="legend-color" style="background-color: #73D13D;"></view>
							<text class="legend-text">其他 15%</text>
						</view>
					</view>
					<view class="chart-legend" v-if="categoryTab === 1">
						<view class="legend-item">
							<view class="legend-color" style="background-color: #4080FF;"></view>
							<text class="legend-text">男性 56%</text>
						</view>
						<view class="legend-item">
							<view class="legend-color" style="background-color: #FF7A85;"></view>
							<text class="legend-text">女性 44%</text>
						</view>
					</view>
					<view class="chart-legend" v-if="categoryTab === 2">
						<view class="legend-item">
							<view class="legend-color" style="background-color: #4080FF;"></view>
							<text class="legend-text">门票 35%</text>
						</view>
						<view class="legend-item">
							<view class="legend-color" style="background-color: #36CFC9;"></view>
							<text class="legend-text">计次卡 25%</text>
						</view>
						<view class="legend-item">
							<view class="legend-color" style="background-color: #FFA940;"></view>
							<text class="legend-text">时间卡 20%</text>
						</view>
						<view class="legend-item">
							<view class="legend-color" style="background-color: #73D13D;"></view>
							<text class="legend-text">私教卡 12%</text>
						</view>
						<view class="legend-item">
							<view class="legend-color" style="background-color: #FF7A85;"></view>
							<text class="legend-text">充值卡 8%</text>
						</view>
					</view>
					<view class="chart-legend" v-if="categoryTab === 3">
						<view class="legend-item">
							<view class="legend-color" style="background-color: #4080FF;"></view>
							<text class="legend-text">0-10岁 15%</text>
						</view>
						<view class="legend-item">
							<view class="legend-color" style="background-color: #36CFC9;"></view>
							<text class="legend-text">11-20岁 25%</text>
						</view>
						<view class="legend-item">
							<view class="legend-color" style="background-color: #FFA940;"></view>
							<text class="legend-text">21-30岁 30%</text>
						</view>
						<view class="legend-item">
							<view class="legend-color" style="background-color: #73D13D;"></view>
							<text class="legend-text">31-40岁 20%</text>
						</view>
						<view class="legend-item">
							<view class="legend-color" style="background-color: #FF7A85;"></view>
							<text class="legend-text">41-50岁 10%</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 趋势分析 -->
		<view class="trend-container">
			<view class="trend-header">
				<view class="trend-title-wrap">
					<view class="trend-title-container">
						<text class="trend-title">历史客流趋势</text>
					</view>
					<view class="trend-header-right">
						<text class="trend-date-range">{{dateRangeText}}</text>
						<uni-button size="mini" type="default" class="last-week-btn"
							v-if="currentTab === 0">上周数据</uni-button>
						<text class="last-month-data" v-if="currentTab === 1">上月: 12,345人次</text>
						<text class="last-month-data" v-if="currentTab === 2">上季: 38,756人次</text>
						<text class="last-month-data" v-if="currentTab === 3">去年: 156,892人次</text>
					</view>
					<view class="trend-tabs">
						<uni-segmented-control :current="currentTab" :values="tabs" @clickItem="onTabChange" />
					</view>
				</view>
			</view>
			<view class="trend-chart">
				<!-- 这里使用实际的图表组件 -->
				<view class="chart-placeholder">
					<view v-if="currentTab === 0">本周数据趋势图</view>
					<view v-if="currentTab === 1">本月数据趋势图</view>
					<view v-if="currentTab === 2">本季数据趋势图</view>
					<view v-if="currentTab === 3">本年数据趋势图</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script >
// 	import { ref, computed } from 'vue';
// 	const selectedDate = ref(new Date().toISOString());
// 	const busynessPercentage = computed(() => 87);
// 	const onDateIconClick = () => {
// 		uni.showActionSheet({
// 			itemList: ['今日', '昨日', '本周', '上周', '本月'],
// 			success: function (res) {
// 				console.log('选择了第' + (res.tapIndex + 1) + '个按钮');
// 			}
// 		});
// 	};
// 	const currentTab = ref(0);
// 	const tabs = ['本周', '本月', '本季', '本年'];
// 	const dateRangeText = computed(() => {
// 		const now = new Date();
// 		switch (currentTab.value) {
// 			case 0: // 本周
// 				const weekStart = new Date(now.setDate(now.getDate() - now.getDay() + 1));
// 				const weekEnd = new Date(now.setDate(now.getDate() - now.getDay() + 7));
// 				return `${weekStart.getMonth() + 1}.${weekStart.getDate()}-${weekEnd.getMonth() + 1}.${weekEnd.getDate()}`;
// 			case 1: // 本月
// 				return `${now.getMonth() + 1}.1-${now.getMonth() + 1}.${new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate()}`;
// 			case 2: // 本季
// 				const quarterStart = new Date(now.getFullYear(), Math.floor(now.getMonth() / 3) * 3, 1);
// 				const quarterEnd = new Date(now.getFullYear(), Math.floor(now.getMonth() / 3) * 3 + 3, 0);
// 				return `${quarterStart.getMonth() + 1}.${quarterStart.getDate()}-${quarterEnd.getMonth() + 1}.${quarterEnd.getDate()}`;
// 			case 3: // 本年
// 				return `${now.getFullYear()}.1.1-${now.getFullYear()}.12.31`;
// 			default:
// 				return '请选择日期范围';
// 		}
// 	});
// 	const onTabChange = (e : any) => {
// 		currentTab.value = e.currentIndex;
// 	};
// 	const categoryTab = ref(0);
// 	const categoryTabs = ['运动类型', '性别分布', '票卡类型', '年龄分布'];
// 	const onCategoryFilter = () => {
// 		uni.showActionSheet({
// 			itemList: categoryTabs,
// 			success: function (res) {
// 				categoryTab.value = res.tapIndex;
// 			}
// 		});
// 	};
// 	const onRefresh = () => {
// 		uni.showLoading({
// 			title: '刷新中'
// 		});
// 		setTimeout(() => {
// 			uni.hideLoading();
// 		}, 1000);
// 	};
</script>
<style>
	page {
		height: 100%;
	}

	.page-container {
		padding: 30rpx;
		background-color: #F5F7FA;
		min-height: 100%;
	}

	.venue-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 30rpx;
	}

	.data-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.data-title {
		font-size: 16px;
		font-weight: bold;
		color: #1A1A1A;
	}

	.time-refresh {
		display: flex;
		align-items: center;
	}

	.data-time {
		font-size: 14px;
		color: #666666;
		margin-right: 8rpx;
	}

	.refresh-icon {
		width: 16px;
		height: 16px;
	}

	.date-picker {
		padding-top: 10rpx;
	}

	.date-icon {
		width: 24px;
		height: 24px;
	}

	.venue-info-container {
		display: flex;
		align-items: center;
	}

	.venue-image {
		width: 160rpx;
		height: 120rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
	}

	.venue-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.venue-name {
		font-size: 18px;
		font-weight: bold;
		color: #1A1A1A;
		margin-bottom: 8rpx;
	}

	.venue-address {
		font-size: 14px;
		color: #666666;
	}

	.data-board {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.data-card {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
		width: 210rpx;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	}

	.card-title {
		font-size: 14px;
		color: #666666;
		margin-bottom: 16rpx;
		display: block;
	}

	.card-value {
		font-size: 20px;
		color: #1A1A1A;
		font-weight: bold;
		display: block;
		margin-bottom: 8rpx;
	}

	.card-unit {
		font-size: 12px;
		color: #999999;
	}

	.card-desc {
		font-size: 12px;
		color: #999999;
		display: block;
	}

	.chart-container {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.chart-header {
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.chart-title {
		font-size: 16px;
		font-weight: bold;
		color: #1A1A1A;
	}

	.chart-content {
		display: flex;
		justify-content: space-between;
	}

	.pie-chart {
		flex: 1;
	}

	.chart-legend {
		width: 200rpx;
		padding-left: 30rpx;
	}

	.legend-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.legend-color {
		width: 24rpx;
		height: 24rpx;
		border-radius: 6rpx;
		margin-right: 16rpx;
	}

	.legend-text {
		font-size: 14px;
		color: #666666;
	}

	.current-flow-card {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flow-circle {
		width: 200rpx;
		height: 200rpx;
		border: 16rpx solid #4080FF;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.circle-content {
		text-align: center;
	}

	.circle-value {
		font-size: 32px;
		color: #1A1A1A;
		font-weight: bold;
		display: block;
	}

	.circle-label {
		font-size: 14px;
		color: #666666;
		display: block;
		margin-top: 8rpx;
	}

	.flow-status {
		flex: 1;
		padding-left: 60rpx;
	}

	.status-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.status-item:last-child {
		margin-bottom: 0;
	}

	.status-label {
		font-size: 14px;
		color: #666666;
	}

	.status-value {
		font-size: 20px;
		font-weight: bold;
	}

	.status-inside {
		color: #4080FF;
	}

	.status-left {
		color: #36CFC9;
	}

	.status-waiting {
		color: #FFA940;
	}

	.trend-container {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.trend-header {
		margin-bottom: 30rpx;
	}

	.trend-title-wrap {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.trend-header-right {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16rpx;
	}

	.last-week-btn {
		font-size: 12px;
		padding: 0 20rpx;
		height: 48rpx;
		line-height: 48rpx;
		background: #F5F7FA;
		color: #666666;
		border: none;
	}

	.last-month-data {
		font-size: 12px;
		color: #666666;
		background: #F5F7FA;
		padding: 8rpx 20rpx;
		border-radius: 24rpx;
	}

	.trend-title-container {
		display: flex;
		align-items: center;
	}

	.trend-title {
		font-size: 16px;
		font-weight: bold;
		color: #1A1A1A;
		margin-right: 16rpx;
	}

	.trend-date-range {
		font-size: 14px;
		color: #666666;
	}

	.filter-icon {
		padding: 10rpx;
	}

	.trend-tabs {
		width: 100%;
	}

	.chart-placeholder {
		height: 400rpx;
		background-color: #F5F7FA;
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
		font-size: 14px;
	}
</style>